import 'package:flutter/material.dart';
import '/utils/setting.dart';
import '/components/actions/search.dart';
import '/components/actions/pop_menu.dart';
import '/components/page/common.dart';

import '/components/list/friend_item.dart';
import '/mock/friends_list.dart';

// 分组标题
Widget groupTitle(String title) {
  return Container(
    width: double.infinity,
    decoration: const BoxDecoration(
      color: DefaultColor.primary,
    ),
    child: Padding(
      padding: const EdgeInsets.fromLTRB(10, 6, 0, 6),
      child: Text(title, style: const TextStyle(fontSize: 12, color: Colors.black87)),
    ),
  );
}

class ContactPage extends StatelessWidget {
  const ContactPage({super.key});

  @override
  Widget build(BuildContext context) {
    return CommonPage(
      title: '通讯录',
      actions: [const SearchAction(), popupMenuWidget()],
      child: Container(
        color: Colors.white,
        child: const ContactWidget(),
      ),
    );
  }
}


/// @auth: yanrui
/// @desc: 联系人列表
/// todo: 联系人列表待完善，滚动待优化
///   1. a-z排序、侧边导航
///   2. 字母吸顶
///   3. 长按菜单
///   4. 点击进入详情

class ContactWidget extends StatefulWidget {
  const ContactWidget({super.key});

  @override
  State<ContactWidget> createState() => _ContactWidgetState();
}

class _ContactWidgetState extends State<ContactWidget> {
  @override
  Widget build(BuildContext context) {

    // 写法一
    // 顶部固定的 官方朋友列表
    // Widget topFixedWidget = Column(
    //   children: topFixedArr.map((item) =>
    //       FriendItem(
    //         title: item['title'],
    //         imgUrl: item['imgUrl'],
    //         onTap: () {
    //           Navigator.pushNamed(context, 'FriendInfoPage');
    //         }
    //       )
    //   ).toList(),
    // );

    // 星标朋友
    // Widget starFriendsWidget = Column(
    //   children: starFriendArr.map((item) =>
    //       FriendItem(title: item['title'], imgUrl: item['imgUrl'])
    //   ).toList(),
    // );

    // A-Z 朋友列表
    // Widget azFriendsWidget = Column(
    //   children: azFriendsListArr.map((item) =>
    //       FriendItem(title: item['title'], imgUrl: item['imgUrl'])
    //   ).toList(),
    // );

    // return ListView(
    //   children: [
    //     topFixedWidget,
    //     groupTitle('星标朋友'),
    //     starFriendsWidget,
    //     groupTitle('A-Z(待完善模拟数据)'),
    //     azFriendsWidget
    //   ],
    // );
    // 写法二：为了更好的性能，使用builder
    return ListView.builder(
        itemCount: starFriendArr.length + 1 + topFixedArr.length + 1 + azFriendsListArr.length,
        itemBuilder: (context, index) {
          if (index < 4) {
            // topFixedWidget 的前4条数据
            return FriendItem(
              title: topFixedArr[index]['title'],
              imgUrl: topFixedArr[index]['imgUrl'],
              onTap: () {
                Navigator.pushNamed(context, 'FriendInfoPage');
              }
            );
          } else if (index == 4) {
            // 星标朋友标题
            return groupTitle('星标朋友');
          } else if (index < 9) {
            // starFriendsWidget 的前4条数据
            return FriendItem(
              title: starFriendArr[index - 5]['title'],
              imgUrl: starFriendArr[index - 5]['imgUrl'],
              onTap: () {
                Navigator.pushNamed(context, 'FriendInfoPage');
              }
            );
          } else if (index == 9) {
            // A-Z 朋友标题
            return groupTitle('A-Z(待完善模拟数据)');
          } else {
            // azFriendsWidget 的数据
            return FriendItem(
              title: azFriendsListArr[index - 10]['title'],
              imgUrl: azFriendsListArr[index - 10]['imgUrl'],
              onTap: () {
                Navigator.pushNamed(context, 'FriendInfoPage');
              }
            );
          }
       }
    );
  }
}
